import React, { Component } from "react";
import { Card, Select, Input, Button, Icon, Table } from "antd";
import LinkButton from "../../../../components/linkButton";
import "./index.less";
import { PAGE_SIZE } from "../../../../utils/constant";
import { reqProductList, reqSearchProducts } from "../../../../api";
const { Option } = Select;

export default class ProductHome extends Component {
  state = {
    loading: true,
    total: 0,
    products: [],
    productsRange: "all",
    searchType: "productName",
    searchValue: "",
    currentPage: 1,
  };

  getColumns = () => {
    this.columns = [
      {
        title: "商品名称",
        dataIndex: "name",
      },
      {
        title: "商品描述",
        dataIndex: "desc",
      },
      {
        title: "价格",
        dataIndex: "price",
        render: (price) => "¥" + price,
      },
      {
        width: 100,
        title: "状态",
        dataIndex: "status",
        render: (status) => (
          <span>
            <Button type="primary">下架</Button>
            在售
          </span>
        ),
      },
      {
        width: 100,
        title: "操作",
        render: (product) => (
          <span>
            <LinkButton>详情</LinkButton>
            <LinkButton>修改</LinkButton>
          </span>
        ),
      },
    ];
  };

  getProducts = async (pageNum) => {
    this.setState({ loading: true });
    let result = await reqProductList({ pageNum, pageSize: PAGE_SIZE });
    this.setState({ loading: false });
    if (result.status === 0) {
      let { list: products, total } = result.data;
      this.setState({
        currentPage: pageNum,
        products,
        total,
      });
    }
  };

  searchProducts = async (pageNum = 1) => {
    let { searchValue, searchType, currentPage, productsRange } = this.state;

    if (!this.searchClick) {
      searchType = this.lastSearchType || searchType;
      searchValue = this.lastSearchValue || searchValue;
    }
    let result;
    if (productsRange === "search") {
      //若搜索字符串不为空,则默认搜索关键字的第一页
      result = await reqSearchProducts({
        pageNum,
        pageSize: PAGE_SIZE,
        searchType,
        searchValue,
      });
      if (result.status === 0) {
        let { list: products, total } = result.data;
        this.setState({
          currentPage: pageNum,
          products,
          total,
        });
      }
    } else {
      //若搜索字符串为空
      if (!this.lastSearchValue && currentPage === 1) return;
      this.getProducts(1);
    }
  };

  handleSearch = () => {
    let { searchType, searchValue } = this.state;
    this.searchClick = true;
    this.setState(
      {
        productsRange: searchValue ? "search" : "all",
      },
      () => {
        this.searchProducts();
        this.lastSearchType = searchType;
        this.lastSearchValue = searchValue;
        this.searchClick = false;
      }
    );
  };

  changePagination = (pageNum) => {
    let { productsRange } = this.state;
    if (productsRange === "all") {
      this.getProducts(pageNum);
    } else {
      this.searchProducts(pageNum);
    }
  };

  constructor(props) {
    super(props);
    this.getColumns();
  }

  componentDidMount() {
    this.getProducts(1);
  }

  render() {
    let { products, total, loading, currentPage } = this.state;
    let title = (
      <span>
        <Select
          defaultValue={"productName"}
          className="product-home-select"
          onChange={(value) => this.setState({ searchType: value })}
        >
          <Option key={"productName"} value={"productName"}>
            按名称搜索
          </Option>
          <Option key={"productDesc"} value={"productDesc"}>
            按描述搜索
          </Option>
        </Select>
        <Input
          placeholder="关键字"
          className="product-home-keyword"
          onChange={(e) => this.setState({ searchValue: e.target.value })}
        />
        <Button type="primary" onClick={this.handleSearch}>
          搜索
        </Button>
      </span>
    );

    let extra = (
      <Button type="primary">
        <Icon type="plus" />
        添加商品
      </Button>
    );

    return (
      <Card title={title} extra={extra}>
        <Table
          bordered
          loading={loading}
          dataSource={products}
          columns={this.columns}
          rowKey="_id"
          pagination={{
            pageSize: PAGE_SIZE,
            showQuickJumper: true,
            total: total,
            current: currentPage,
            onChange: this.changePagination,
          }}
        />
      </Card>
    );
  }
}
